<script setup>

import organizationTree from "@/components/organization-tree/index.vue";
import OrganizationTable from "@/views/sys/organization/components/organization-table.vue";
import OrganizationForm from "@/views/sys/organization/components/organization-form.vue";
import {useSysOrganizationListByParentCode} from "@/composables/sys/organization.js";

const idTemp = ref(null)
// 表单显示
const formShow = ref(false)
const queryParams = ref({
  parentCode: '-'
})
// 查询数据
const {data, isLoading} = useSysOrganizationListByParentCode(queryParams)
// 选中组织机构
const selectedOrganizationNode = (option) => {
  queryParams.value.parentCode = option.code
}

// 新增按钮
const handleAdd = () => {
  formShow.value = true
}
// 关闭表单
const handleClose = () => {
  formShow.value = false
}
// 编辑
const handleEdit = (id) => {
  idTemp.value = id
  formShow.value = true
}

</script>

<template>
  <div class="flex">
    <organization-tree
        class="mr-5"
        @on-node-click="selectedOrganizationNode"
    />
    <organization-table
        class="flex-1"
        @on-add="handleAdd"
        :data="data?.data || []"
        :is-loading="isLoading"
        @on-edit="handleEdit"
    />
    <organization-form
        :show="formShow"
        @close="handleClose"
        :id="idTemp"
    />
  </div>
</template>

<style scoped>

</style>